<!-- 机构用户管理 -->
<template>
  <div class="mechanism">
    <div class="top">
      <el-form ref="form" :model="form" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="角色名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="角色编码">
              <el-input v-model="form.coding"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="btndiv">
              <el-button class="query" @click="search">查询</el-button>
              <el-button class="reset" @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tableDiv">
      <el-table
        stripe
        :data="tableData"
        style="border-radius: 6px"
        :header-cell-style="{
          color: '#333333',
          fontFamily: 'PingFang SC',
          fontSize: '14px',
          fontWeight: 500,
          background: '#F4F8FF',
          borderBottom: '1px solid #B9DAF2',
        }"
      >
        <el-table-column
          prop="orderNo"
          label="序号"
          width="55px"
        ></el-table-column>
        <el-table-column
          prop="organizationName"
          label="角色名称"
          width="250"
        ></el-table-column>
        <el-table-column prop="code" label="角色编码"></el-table-column>
        <el-table-column prop="type" label="角色描述"></el-table-column>
        <el-table-column
          prop="contactName"
          label="最近更新时间"
        ></el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <el-button
              class="change"
              size="mini"
              type="warning"
              plain
              @click="ChangeUserPermissions"
            >
              授权
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 
　　　　弹窗组件引入
　　　　dialogVisible : 表示 弹框是否显示 父组件 传 子组件的值 
　　　　dialogInfo : 表示 当前点击查看的数据 父组件 传 子组件的值
　　　　update:dialogVisible : 表示 组件 点击取消关闭确定 传过来的 是否显示弹窗 子组件 传 父组件
　　 -->
      <component-dialog
        :dialogVisible="dialogVisible"
        @update:dialogVisible="dialogVisibles"
      ></component-dialog>
    </div>

    <div class="pagediv">
      <el-pagination
        @size-change="handlePageSize"
        @current-change="handleCurrentPage"
        :current-page="currentPage"
        :page-sizes="[1, 2]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import "@/assets/queryPublic.css";
import componentDialog from "./componentDialog.vue";
export default {
  name: "mechanism",
  components: {
    componentDialog,
  },
  data() {
    return {
      dialogVisible: false,
      currentPage: 1,
      pageSize: 1,
      total: 8,
      tableData: [],
      newTabledata: [
        {
          orderNo: 1,
          loginName: "592034",
          organizationName: "海南股权交易中心有限责任公司",
          code: "592033",
          type: "信用增进机构",
          contactName: "郭沫若",
        },
        {
          orderNo: 2,
          loginName: "592031",
          organizationName: "江苏股权交易中心有限责任公司",
          code: "592033",
          type: "信用增进机构",
          contactName: "郭沫若",
        },
      ],
      value2: "",
      form: {
        name: "",
        coding: "",
      },
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
      ],
      value: "",
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    ChangeUserPermissions() {
      this.dialogVisibles = true;
    },

    //按钮失焦
    ChangeUserPermissions(info) {
      this.dialogVisible = true;
      this.dialogInfo = info;
    },
    dialogVisibles(v) {
      this.dialogVisible = v;
      console.log(v);
    },
    btnblur(event) {
      let target = event.target;
      if (target.nodeName == "I" || target.nodeName == "SPAN") {
        target = event.target.parentNode;
      }
      target.blur();
    },

    handlePageSize(pageSize) {
      this.pageSize = pageSize;
      this.search();
    },
    handleCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.search();
    },
    search() {
      this.total = this.newTabledata.length;
      // console.log(this.pageSize);
      this.tableData = this.newTabledata.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    reset() {},
  },
};
</script>

<style scoped lang='scss'>
.top {
  min-height: 40px;
  background: #f4f8ff;
  border: 1px solid #b9daf2;
  border-radius: 8px;
  padding: 16px 22px 16px 0;
}

.tableDiv {
  background: #ffffff;
  border: 1px solid #b9daf2;
  border-radius: 6px;
  margin-top: 20px;
}

::v-deep.query,
.reset,
.added {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  line-height: 3px;
  width: 70px;
  height: 28px;
  background: linear-gradient(270deg, #3d80ff, #3dafff);
  border-radius: 5px;
}

.reset {
  background: linear-gradient(270deg, #c7cbcc, #adafb1);
}

.added {
  background: linear-gradient(270deg, #0bc6aa, #13e8cc);
}

.btndiv {
  margin-top: 5px;
  text-align: right;
}

.flexDiv {
  display: flex;
  flex-direction: row-reverse;
}

.export {
  margin: 21px 0px 11px 0;
  width: 107px;
  height: 30px;
  border: 1px solid #3d80ff;
  border-radius: 6px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #3d80ff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pagediv {
  float: right;
  margin-top: 19px;
}
.change {
  border: 1px solid rgb(120, 216, 120);
  background-color: rgb(236, 255, 236);
  color: rgb(96, 198, 96);
}
</style>
